<template>
  <div id="home">
    <!-- 云智头部 -->
    <template v-if="sysNo === 'M201'">
      <div class="header bg-color-black">
        <div class="lf">
          <!--<img src="../../images/logo2.png" class="logo lf">-->
          <p class="tit">分析</p>
        </div>
        <div class="rf">
          <el-select size="mini" v-model="tempAppId" placeholder="请选择" class="lf" @change="handleAppTypeChange"  popper-class="zIndex-popper">
            <el-option
              v-for="item in appOptionData"
              :key="item.app_id"
              :label="item.app_name"
              :value="item.app_id">
            </el-option>
          </el-select>
          <p class="user lf">
            <i class="iconfont icon-person"></i>
            用户 : {{ userName}}
          </p>
          <p class="gitback lf" @click="goBack" style="cursor: pointer;">
            返回
          </p>
          <p class="logout lf" @click="logout" style="cursor: pointer;">
            退出
          </p>
        </div>
      </div>
    </template>
    <!-- 云晰头部 -->
    <template v-else-if="sysNo === 'M202'">
      <b-header></b-header>
    </template>
    <!--开发头部-->
    <template v-else-if="sysNo === 'M204'">
      <iap-header></iap-header>
    </template>
    <!--网关头部-->
    <template v-else-if="sysNo === 'M206'">
      <div class="gate-way-header">
        <p class="logo lf">网关</p>
        <div class="rf">
          <p class="user lf">
            <i class="iconfont icon-person"></i>
            用户 : {{ userName}}
          </p>
          <p class="gitback lf" @click="goBack" style="cursor: pointer;">
            返回
          </p>
          <p class="logout lf" @click="logout" style="cursor: pointer;">
            退出
          </p>
        </div>
      </div>
    </template>
    <template v-else-if="sysNo === 'M207'">
      <push-header></push-header>
    </template>
    <div class="body bg-color-gray">
      <div class="menu lf" :style="{ height: `${height}px` }">
        <happy-scroll color="rgba(189, 189, 189, .5)" resize>
          <div id="asd123">
            <el-menu :router="true" :unique-opened="true" :default-active="currentPath" >
              <el-submenu :index="index + ''" v-for="(item, index) in data" :key="item.id">
                <template slot="title">
                  <i class="iconfont" :class="item.obj.iconId" style="padding-right: 5px"></i>
                  <span>{{ item.obj.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="val.obj.url || '#'" v-for="val in item.children" :key="val.id" @click.native="updatePath(val.obj.url)">{{ val.obj.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </happy-scroll>
      </div>
      <div class="main" :style="{ height: `${height}px` }">
        <p class="header-title font16 bg-color-white">{{ title }}</p>
        <router-view v-if="num > 0"/>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { VNoBorderSelect, VDropdown, VButton, VHeader } from '../../../components/index'
  import { getFormatTime, nextPage } from '../../../assets/js/index'
  import BHeader from '../../../components/BHeader/BHeader'
  import ajax from '../../../api/ajax/ajax'
  import iapHeader from '../../iapadmin/comm/iHeader/iHeader'
  import api from '../../../api/url'
  import { mixinParams } from '../../../assets/js/mixin1'
  import { mapMutations, mapGetters } from 'vuex'
  import pushHeader from '../../mobilePush/comm/pushHeader'

  export default {
    components: {
      VHeader,
      BHeader,
      VNoBorderSelect,
      VDropdown,
      VButton,
      iapHeader,
      pushHeader
    },
    mixins: [mixinParams],
    data () {
      return {
        data: [],
        commonData: {},
        num: 0,
        time: '',
        currentPath: '',
        height: null,
        sysNo: 'M201',
        userName: '',
        appOptionData: [],
        tempAppId: ''
      }
    },
    computed: {
      ...mapGetters([
        'title'
      ]),
      appType () {
        return this.$store.state.appType
      }
    },
    methods: {
      ...mapMutations([
        'pd_updateAppType'
      ]),
      // 获取当前系统
      getCurrSystem () {
        ajax.post(api.GET_CURR_SYSTEM).then(res => {
          this.sysNo = res.data
          if (this.sysNo === 'M201' || this.sysNo === 'M203' || this.sysNo === 'M204' || this.sysNo === 'M205') { // 201分析, 203发布，204网关，205推送
            ajax.post(api.GETMENU, {
              sys_no: this.sysNo
            }).then(res => {
              this.data = res.data
            })
            ajax.post(api.QUERYALLCOMMONDATA).then(res => {
              this.commonData = res.data
              this.num = Object.keys(this.commonData).length
              sessionStorage.setItem('commonData', JSON.stringify(this.commonData))
            })
          } else if (this.sysNo === 'M202') {
            ajax.post(api.GETMENU2, {
              sys_no: this.sysNo
            }).then(res => {
              this.data = res.data
            })
            this.num = 1
          }
        })
      },
      logout () {
        ajax.post(api.LOGOUT).then(res => {
          this.$confirm('将退出登录是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            setTimeout(() => {
              window.location.href = '/'
            }, 500)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
        })
      },
      goBack () {
        window.location.href = '/view/systemList'
      },
      // changeApp (item) {
      //   this.appValue = item.value
      // },
      // changeTerm (item) {
      //   this.termValue = item.value
      // },
      goHelpCenter () {
        window.open('http://localhost:8282/static/help/index.html', '_blank')
      },
      // 更新页面路径
      updatePath (url) {
        this.pd_updatePath(url)
      },
      // 获取系统类型列表
      getAppList () {
        ajax.post(api.SELECT_ALL_BAMETA_APP_LIST).then(res => {
          if (res.data.length > 0) {
            this.appOptionData = res.data
          }
        })
      },
      // 获取当前系统
      getCurrApp () {
        ajax.post(api.GET_CURR_APP).then(res => {
          this.tempAppId = res.data
          this.pd_updateAppType(res.data)
        })
      },
      // 系统类型变换
      handleAppTypeChange (val) {
        ajax.post(api.CHANGE_SYSTEM, { app_id: val }).then((res) => {
          nextPage('/home/databoard')
          this.pd_updatePath('/home/databoard')
          this.pd_updateAppType(val)
        })
      }
    },
    created () {
      this.getCurrSystem()
      this.getAppList()
      this.getCurrApp()
      this.userName = sessionStorage.getItem('userName')
      this.time = getFormatTime(new Date(), this)
      this.currentPath = this.$route.path
      this.height = window.innerHeight - 50
      window.onresize = () => {
        this.height = window.innerHeight - 50
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #home
    .header
      height 50px
      position relative
      z-index 99
      .lf
        .logo
          width 207px
          position relative
          top 12px
          padding-left 15px
        .tit
          font-size 24px
          color #ddd
          height 50px
          line-height 50px
          margin-left 20px
      .rf
        color #bbb
        height 100%
        margin-right 10px
        .el-select
          margin-top 11px
          .el-input
            .el-input__inner
              width 180px
              padding 0!important
              color #bbb
              background transparent
              border 0 none
              border-bottom 1px solid #bbb
              border-radius 0
              &::placeholder
                color #bbb
            .el-icon-arrow-up:before
              color #bbb
          .el-input__icon
            width 14px
        p
          height 100%
          line-height 50px
          margin-left 10px
          padding 0 10px
          i
            margin-right 5px
        .help-center
          cursor pointer
        .help-center:hover
          background #9eceff
        .help-center:active
          background #3A7CC1
    .gate-way-header
      height 50px
      line-height 50px
      background #262626
      overflow hidden
      .logo
        font-size 24px
        color #ddd
        padding-left 20px
      .rf
        color #bbb
        p
          padding-right 20px
    .body
      overflow hidden
      .menu
        width 200px
        background #333
        overflow auto
        .happy-scroll-container
          width 100% !important
          .happy-scroll-content
            width 100%
            .el-menu
              background #333
              border-right solid 0
            .el-submenu .el-menu-item
              padding-left 45px!important
              min-width 160px
              color #bbb
            .el-submenu__title, .el-submenu .el-menu-item
              height 35px
              line-height 35px
            .el-menu-item-group
              .el-menu-item-group__title
                padding 0
              .el-menu-item
                position relative
              .el-menu-item:before
                content ''
                width 3px
                height 3px
                background #666
                position absolute
                top 16px
                left 27px
            .el-submenu__title, i.iconfont
              color #bbb
            .el-menu-item:focus, .el-menu-item:hover
              background #333
            .el-submenu__title:focus, .el-submenu__title:hover
              background #4c4c4c
            .is-active
              .el-submenu__title, i.iconfont, span
                color #4093ff
              .el-menu-item-group
                .is-active
                  color #4093ff
              .el-menu-item:hover
                background #4c4c4c
              .is-active:hover
                color #fff
              .el-submenu__title:hover
                i.iconfont, span
                  color #fff
      .main
        overflow auto
        .header-title
          height 50px
          line-height 50px
          padding 0 20px
        .el-input
          .el-input__inner
            font-size 12px
</style>
